<template>
    <!-- 营销项目计划管理提报 -->
    <div>
        <!-- 查询 -->
        <commonFilter ref="commonFilter" @filterChange="changeHandle" @onCollapse="collapseHandle"/>
        <!-- 列表 -->
        <FilterTable
            ref="table"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :isSelectColumn="false"
            :onColumnsChange="columns => this.columns = columns"
            columnsRef="projectOperating_plan_inquire_index_01"
        >
            <template slot="controls">
                <el-button size="small" :loading="downLoading" type="primary" icon="el-icon-download" @click="exportExcel()">下载</el-button>
            </template>
        </FilterTable>
  
        <!-- 弹窗 -->
        <Drawer
            ref="infoDrawer"
            :visible.sync="visibleDrawer"
            title="项目计划提报明细"
            destroyOnClose
            :containerStyle="{width:'70vw',height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
        >
            <details-form :options="detailsConfig" @close="closeDrawer"/>
        </Drawer>
    </div>
</template>

<script>
    
    import { dictionary } from '@/utils/dictMixin';
    import { exportExcelFile } from '@/utils';
    import commonFilter from '../commonFilter/indexQuery';
    import detailsForm from '../approvalDetails';
    import { findPageDlr,exportExcelDlr } from '@/api/cms-api/projectOperating/plan';
    import * as types from '@/api/cms-api/projectOperating/plan/types';
    import { porjectWithdraw} from '@/api/cms-api/projectOperating/plan';


    export default {
        mixins: [dictionary],
        components:{
            commonFilter,
            detailsForm
        },
        data(){
            return {
                columns: this.creatColumns(),
                fetchApi: findPageDlr,
                fetchParams: {},
                visibleDrawer:false,
                downLoading: false,
                detailsConfig:{},
            }
        },
        mounted(){
            this.BaseTable = this.$refs.table.$refs.pageTable;
        },
        methods:{
            //打开窗口
            drawerHandle(row,type){
                let id = -1;
                if(type != 'add'){
                    id = row.planId;
                }
                this.detailsConfig = {
                    id: id,  //表主键
                    formType:type
                }
                this.visibleDrawer = true;
            },
            //关闭窗口
            closeDrawer(data){
                this.visibleDrawer = false;
                if (data.type === 'refresh') {
                    // 重新加载表格数据
                    this.fetchParams = { ...this.fetchParams };
                }
            },
            //当搜索按钮按下后会触发
            changeHandle(val){
                
                if (!val) {
                    val = {planStartDate:[],activityMonth:[]}
                }
                this.fetchParams = Object.assign({
                    planStartDateBegin:val.planStartDate[0]||undefined,
                    planStartDateEnd:val.planStartDate[1]||undefined,
                    activityMonthBegin:val.activityMonth[0]||undefined,
                    activityMonthEnd:val.activityMonth[1]||undefined,
                }, val);
            },
            //展开收起搜索框触发
            collapseHandle(){
                this.$nextTick(() => {
                    this.BaseTable.EXECUTE_RESET_HEIGHT();
                });
            },
            //导出
            async exportExcel(){
                let r = await this.$refs.commonFilter.$refs.commonTopFilter.GET_FORM_DATA();
                let p = null;
                if(r!=null && r.length>1){
                    p = r[1];
                }

                if (!p) {
                    p = {planStartDate:[],activityMonth:[]}
                }
                    debugger
                p = Object.assign({
                        'projectProgramId': this.$refs.commonFilter.projectProgramId,
                        "modelIdList":this.$refs.commonFilter.modelIdList,
                        "planStartDateBegin":p.planStartDate[0]||undefined,
                        "planStartDateEnd":p.planStartDate[1]||undefined,
                        "activityMonthBegin":p.activityMonth[0]||undefined,
                        "activityMonthEnd":p.activityMonth[1]||undefined
                        },p);    
               
                this.downLoading = true;
                exportExcelDlr(p).then(res => {
                    exportExcelFile(res.data,"营销项目计划");
                    this.downLoading = false;
                });
            },
                // 撤回
            async withdraw(row){
                
                let status = row.planStatus;
                let planId = row.planId;
                if(status!="25311002"){//计划已提交
                    this.$notify.error({title: '提示信息',message:'您好，只能撤回已提交的计划！'});
                    return;
                } 
                this.$confirm('是否撤回', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                        let params = {
                            planId:planId,
                            type:"plan"
                        }
                        let res =  await porjectWithdraw(params);
                        this.validReturnDate(res);
                }).catch(() => {
                    this.$notify.info({title: '提示信息',message:'操作取消！'});
                });
            }, 
            validReturnDate(res){
                if (res.resultCode === 200) {
                    this.$notify.success({title: '提示信息',message:'操作成功!'});
                    // 重新加载
                    this.fetchParams = { ...this.fetchParams };
                }else {
                    this.$notify.error({title: '提示信息',message:res.errMsg||'操作失败!'});
                    
                }
             },
            //创建表格列配置
            creatColumns(){
                return [
                    { title: '序号', dataIndex: 'index', width: 80, sorter: true,
                        render: props => {
                            return <span>{props.row.index + 1}</span>;
                        }
                    },
                    { title: '操作', dataIndex: 'column-action', width: 100, fixed: 'left',
                        render: (props, h) => {
                            return (
                                <div>
                                    <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row,'show')}>
                                        明细
                                    </el-button>
                                    <el-button size="mini" type="text" onClick={() => this.withdraw(props.row)}>
                                        撤回
                                    </el-button>
                                </div>
                            );
                        }
                    },
                    { title: '项目编号', dataIndex: 'planCode', sorter: true},
                    { title: '项目状态', dataIndex: 'planStatus', sorter: true ,
                        render: props => {
                            return <span>{this.createDictText(props.row.planStatus, '2531')}</span>;
                        }
                    },
                    { title: '计划项目金额', dataIndex: 'planProjectAmount', sorter: true,numberFormat:true,},
                    { title: '计划批准金额', dataIndex: 'planApproveAmount', sorter: true,numberFormat:true,},
                    { title: '计划核销比例', dataIndex: 'planCancellationRatio', sorter: true,
                        render: props => {
                            return <span>{props.row.planCancellationRatio}%</span>;
                        }
                    },
                    { title: '合作方式', dataIndex: 'cooperationMethod', sorter: true ,
                        render: props => {
                            return <span>{this.createDictText(props.row.cooperationMethod, '2532')}</span>;
                        }
                    },
                    { title: '计划支持场次/投放天数', dataIndex: 'planTimeDay', sorter: true},
                    { title: '目标订单数', dataIndex: 'targetOrderNum', sorter: true},
                    { title: '目标集客数', dataIndex: 'targetGuestsNum', sorter: true},
                    { title: '目标留档数', dataIndex: 'targetRetentionNum', sorter: true},
                    { title: '项目月份', dataIndex: 'activityMonth', sorter: true, dateFormat: 'YYYY年MM月'},
                    { title: '项目车型', dataIndex: 'modelLists', sorter: true},
                    // { title: '项目大类', dataIndex: 'projectMainClass', sorter: true },
                    { title: '项目大类', dataIndex: 'projectMainClassName', sorter: true },
                    // { title: '项目小类', dataIndex: 'projectSmallClass', sorter: true },
                    { title: '项目小类', dataIndex: 'projectSmallClassName', sorter: true },
                    { title: '方案编号', dataIndex: 'programCode', sorter: true},
                    { title: '方案名称', dataIndex: 'programName', sorter: true},
                    { title: '项目名称', dataIndex: 'projectName', sorter: true},
                    { title: '开始日期', dataIndex: 'planStartDate', sorter: true, dateFormat: 'YYYY年MM月DD日'},
                    { title: '结束日期', dataIndex: 'planEndDate', sorter: true, dateFormat: 'YYYY年MM月DD日'},
                    // { title: '创建时间', dataIndex: 'createdAt', sorter: true, dateFormat: 'YYYY年MM月DD日 HH:mm:ss'},
                ];
            },
        },
    }
</script>

<style scoped>
    
</style>